<template>
  <div>
    <div class="BasicInformation">
      <span style="display: flex; justify-content: center; font-size: large">基本信息</span>
      <a-form :model="formState" v-bind="layout" name="form_context" :validate-messages="validateMessages" @finish="onFinish" @finishFailed="onFinishFailed">
        <a-form-item has-feedback label="接口分类" :rules="[{ required: true }]">
          <a-select v-model:value="formState.interfaceclassify" :options="InterFaceClassify" />
        </a-form-item>
        <a-form-item has-feedback label="接口名称" :rules="[{ required: true, message: 'Please input your username!' }]">
          <a-input v-model:value="formState.interfacename" />
        </a-form-item>
        <a-form-item has-feedback label="接口来源" :rules="[{ required: true }]">
          <a-select v-model:value="formState.interfacesource" :options="InterFaceSouce" />
        </a-form-item>

        <a-form-item label="接口描述">
          <a-textarea v-model:value="formState.interfacedescription" />
        </a-form-item>

        <span style="display: flex; justify-content: center; font-size: large">API参数</span>

        <a-form-item has-feedback label="协议" :rules="[{ required: true }]">
          <a-select v-model:value="formState.protocol" :options="Protocols" />
        </a-form-item>
        <a-form-item has-feedback label="IP端口" :rules="[{ required: true }]">
          <a-input v-model:value="formState.ipport" />
        </a-form-item>
        <a-form-item has-feedback label="Path" :rules="[{ required: true }]">
          <a-input v-model:value="formState.path" />
        </a-form-item>
        <a-form-item has-feedback label="请求方式" :rules="[{ required: true }]">
          <a-select v-model:value="formState.requestmethod" :options="RequestMethod" />
        </a-form-item>

        <a-form-item label="超时时间" :rules="[{ required: true }]"> <a-input v-model:value="formState.timeout" />秒 </a-form-item>
        <a-form-item>
          <a-button type="primary" html-type="submit">Submit</a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import type { Rule } from 'ant-design-vue/es/form';
  import type { FormInstance } from 'ant-design-vue';
  interface FormState {
    interfaceclassify: string;
    interfacename: string;
    interfacesource: string;
    interfacedescription: string;
    protocol: string;
    ipport: string;
    path: string;
    requestmethod: string;
    timeout: string;
  }
  const formState = reactive<FormState>({
    interfaceclassify: '',
    interfacename: '',
    interfacesource: '',
    interfacedescription: '',
    protocol: '',
    ipport: '',
    path: '',
    requestmethod: '',
    timeout: '',
  });
  //表单
  const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
  };

  const validateMessages = {
    required: '${label} is required!',
    types: {
      email: '${label} is not a valid email!',
      number: '${label} is not a valid number!',
    },
    number: {
      range: '${label} must be between ${min} and ${max}',
    },
  };

  //接口分类
  const InterFaceClassify = [
    {
      value: '1',
      label: '接口分类1',
    },
    {
      value: '2',
      label: '接口分类2',
    },
    {
      value: '3',
      label: '接口分类3',
    },
  ];
  //接口来源
  const InterFaceSouce = [
    {
      value: '1',
      label: '数据服务',
    },
    {
      value: '2',
      label: '指标管理',
    },
    {
      value: '3',
      label: '决策引擎',
    },
  ];
  //协议
  const Protocols = [
    {
      value: '1',
      label: 'HTTP',
    },
    {
      value: '2',
      label: 'HTTPS',
    },
  ];
  //请求方式
  const RequestMethod = [
    {
      value: '1',
      label: 'POST',
    },
    {
      value: '2',
      label: 'GET',
    },
  ];

  const onFinish = (values: any) => {
    console.log('Success:', values);
  };
  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };
</script>
<style lang="less" scoped>
  .BasicInformation {
    margin-right: 20%;
  }

  .BasicInformation :global(.ant-form-item) {
    // width: 300%;
    // margin-left: -20% !important;
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }
</style>
